<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<!--<script type="text/javascript" src="layui/layui.js"></script>-->
		<title>个人主页</title>
	</head>

	<body>
		<!--	<ul class="layui-nav">
			<li class="layui-nav-item">个人中心</li>
		</ul>
		<br>-->
		<!-- div+CSS -->
		<!-- 	<input type="button" value="提交" class="layui-btn layui-btn-danger" /> -->
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md3 ">
					<!-- 个人信息 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-gray">
							<span class="layui-icon layui-icon-about"></span> 个人信息
						</div>
						<div class="layui-card-body" align="center">
							<img class="layui-circle" src="img/头像.jpg" style="width: 100px;height: 100px;" />
							<br>
							<label class="layui-bg-gray" style="font-size: 20px;padding-left: 20px;padding-right: 20px;">
								<code>王&nbsp;&nbsp;婧</code>
							</label>
							<br>
							<div align="left">
								<span class="layui-icon layui-icon-location"></span>国籍：中国<br>
								<span class="layui-icon layui-icon-home"></span>家庭住址：天津市东丽区<br>
								<span class="layui-icon layui-icon-date"></span>出生日期：2019-3-24<br>
								<span class="layui-icon layui-icon-cellphone"></span>联系电话：18526089489<br>
								<span class="layui-icon layui-icon-template"></span>Email：18526089489@163.com<br>
							</div>
						</div>
					</div>
					<!-- 技术能力 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-cyan">
							<span class="layui-icon layui-icon-speaker"></span> 技术能力
						</div>
						<div class="layui-card-body">
							HTML5：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="60%"></div>
							</div> IOS：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-orange" lay-percent="46%"></div>
							</div>JQuery：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-green" lay-percent="90%"></div>
							</div> PHP：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-orange" lay-percent="67%"></div>
							</div> CSS：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-red" lay-percent="59%"></div>
							</div>
						</div>
						<br>
						<!--联系我-->
						<div class="layui-card">
							<div class="layui-card-header layui-bg-cyan">
								<span class="layui-icon layui-icon-camera"></span>请联系我
							</div>
							<div class="layui-card-body layui-bg-blue">

								<form class="layui-form">
									<div class="layui-form-item">
										<label class="layui-form-label">Email:</label>
										<div class="layui-input-block">
											<input type="text" id="email" class="layui-input" placeholder="请输入邮箱">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label" style="margin-left:30px ;">自我评价：</label>
									</div class="layui-input-inline">
									<textarea class="layui-textarea" cols="30" row="5" style="width:150px;margin-left:110px ;"></textarea>
							</div>
						</div>
						</form>
						<div class="layui-form-item" align="center">
							<a href="" class="layui-btn layui-btn-success">
								<span class="layui-icon layui-ok-circle">发送</span>
							</a>
						</div>
					</div>
				</div>

				<div class="layui-col-md9">
					<!--自我介绍-->
					<div class="layui-elem-quote">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人来自天津中德应用技术大学2018级学生，精通HTML5,CSS3,Javascript等网页开发技术，熟练使用Hbuilder,Git等开发工具<br><br>
						<div align="center">
							<a href="" class="layui-btn layui-btn-lg layui-bg-green">了解更多......</a>
						</div>
					</div>
					<div class="layui-collapse">
						<div class="layui-colla-item">
							<div class="layui-colla-title">
								工作经验
							</div>

							<div class="layui-colla-content layui-show">
								<table class="layui-table" lay-even>
									<!--<caption>工作经历</caption>-->
									<tr>
										<td>序号</td>
										<td>起止时间</td>
										<td>学校</td>
										<td>姓名</td>
										<td>身份</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="idA">1</td>
										<td>2018-9~2020-7</td>
										<td>天津中德应用技术大学</td>
										<td>王婧</td>
										<td>学生</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="idA">2</td>
										<td>2018-9~2020-7</td>
										<td>天津中德应用技术大学</td>
										<td>王婧</td>
										<td>学生</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="idA">3</td>
										<td>2018-9~2020-7</td>
										<td>天津中德应用技术大学</td>
										<td>王婧</td>
										<td>学生</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="idA">4</td>
										<td>2018-9~2020-7</td>
										<td>天津中德应用技术大学</td>
										<td>王婧</td>
										<td>学生</td>
									</tr>
								</table>
							</div>

							<div class="layui-collapse">
								<div class="layui-colla-item">
									<div class="layui-colla-title">
										实习项目
									</div>

									<div class="layui-colla-content layui-show">
										<table class="layui-table" lay-even>
											<!--<caption>工作经历</caption>-->
											<tr>
												<td>序号</td>
												<td>起止时间</td>
												<td>项目名称</td>
												<td>项目任务</td>
												<td>完成进度</td>
											</tr>
											<tr>
												<td><input type="checkbox" id="idA">1</td>
												<td>2019-11-19~2020-11-24</td>
												<td>web实训</td>
												<td>制作个人简历</td>
												<td>80%</td>
											</tr>
											<tr>
												<td><input type="checkbox" id="idA">2</td>
												<td>2019-11-19~2020-11-24</td>
												<td>web实训</td>
												<td>制作个人简历</td>
												<td>80%</td>
											</tr>
											<tr>
												<td><input type="checkbox" id="idA">3</td>
												<td>2019-11-19~2020-11-24</td>
												<td>web实训</td>
												<td>制作个人简历</td>
												<td>80%</td>
											</tr>
											<tr>
												<td><input type="checkbox" id="idA">4</td>
												<td>2019-11-19~2020-11-24</td>
												<td>web实训</td>
												<td>制作个人简历</td>
												<td>80%</td>
											</tr>
										</table>
									</div>
									<div class="layui-collapse">
										<div class="layui-colla-item">
											<div class="layui-colla-title">
												学习进度
											</div>

											<div class="layui-colla-content layui-show">
												<table class="layui-table" lay-even>
													<!--<caption>工作经历</caption>-->
													<tr>
														<td>序号</td>
														<td>天数</td>
														<td>学习内容</td>
														<td>学习进度</td>
														<td>个人表现</td>
													</tr>
													<tr>
														<td><input type="checkbox" id="idA">1</td>
														<td>第一天</td>
														<td>简历制作</td>
														<td>模板讲解</td>
														<td>98%</td>
													</tr>
													<tr>
														<td><input type="checkbox" id="idA">2</td>
														<td>第二天</td>
														<td>图例制作</td>
														<td>图例查找</td>
														<td>67%</td>
													</tr>
													<tr>
														<td><input type="checkbox" id="idA">3</td>
														<td>第三天</td>
														<td>标记</td>
														<td>全部标记</td>
														<td>47%</td>
													</tr>
													<tr>
														<td><input type="checkbox" id="idA">4</td>
														<td>第四天</td>
														<td>综合测试</td>
														<td>无</td>
														<td>86%</td>
													</tr>
												</table>
											</div>

											<!--轮播图-->
											<div class="layui-card">
												<div class="layui-card-header">获奖证书</div>
												<div class="layui-card-body">
													<div class="layui-carousel" id="certify">
														<div carousel-item>
															<div><img style="width:100%;height:100%;" src="img/证书1.jpg"></div>
															<div><img style="width:100%;height:100%;" src="img/证书2.jpg"></div>
															<div><img style="width:100%;height:100%;" src="img/证书3.jpg"></div>
														</div>
													</div>
												</div>

											</div>
										</div>

									</div>
								</div>

								<!--	<script>
						layui.use('element', function() {
							var element = layui.element;
						});
					</script>
-->
								<script type="text/javascript" src="layui/layui.all.js"></script>
								<script>
									layui.use(['element', 'carousel'], function() {
										var element = layui.element;
										var carousel = layui.carousel;
										carousel.render({
											elem: '#certify',
											autoplay: true,
											width: '100 %',
											interval: 800,
											arrow: 'alawys',
											anim: 'default',
										});
									});
								</script>
	</body>

</html>